<!--
 * @Author: WeiJin 3413105907@qq.com
 * @Date: 2023-12-10 17:24:33
 * @LastEditors: WeiJin 3413105907@qq.com
 * @LastEditTime: 2023-12-17 21:22:51
 * @FilePath: \rpsm-user\src\views\home\feeInfo\MyUpaiedInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

  <div>
    <el-table
    :data="unPaiedLidt"
    style="width: 100%">
    <el-table-column
      label="欠费人"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.user.username }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="欠费时间"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.amount.amount_date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="欠费金额"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.amount.amount / 100 }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="房间号"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.room.room_code }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="欠费类型"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px" v-if="scope.row.amount.amount_type == 1">水费</span>
        <span style="margin-left: 10px" v-if="scope.row.amount.amount_type == 2">电费</span>
        <span style="margin-left: 10px" v-if="scope.row.amount.amount_type == 3">物业费</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" >
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="payFeeDialogShow(scope.row.amount.amount_roomid,scope.row.amount.amount_type)">缴费</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 缴费弹窗 -->
  <el-dialog title="缴费" :visible.sync="payDialogShow">
    <el-form >
      <el-form-item label="金额" >
        <el-input v-model="amount" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="payFeeDialogNone">取 消</el-button>
      <el-button type="primary" @click="payFee">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<style scoped>
    .el-button {
        background-color: rgba(12, 19, 211, 0.383);
        color: #fff;
    }
</style>

<script>
import {baseurl} from '@/param'

export default {
    name:'MyUpaiedInfo',
    data() {
        return {
            unPaiedLidt:[],
            payDialogShow:false,
            roomId:'',
            type:'',
            amount:''
        }
    },
    methods:{
      //缴费展示缴费弹窗
      payFeeDialogShow(roomId,type){
        // console.log(roomId);
        // console.log(type);  
        this.payDialogShow= true
        this.roomId=roomId
        this.type=type
      },
      payFeeDialogNone(){
        
        this.roomId=''
        this.type=''
        this.payDialogShow= false
      },
      payFee(){
        if(!parseFloat(this.amount)){
          alert("非法金额数")
          return
        }
        axios.post(`${baseurl}/fee/addPay`,{
          pay:this.amount,
          pay_room_id:this.roomId,
          pay_type:this.type
        },{
          headers:{
                Authorization:sessionStorage.getItem('Authorization')
            }
        }).then(res => {
          if(res.data.code){
            alert("缴费成功")
            this.amount = ""
            this.getUnpaiedList()
            this.payFeeDialogNone()
          }else{
            alert(res.data.message)
          }
        })
      },
      getUnpaiedList(){
        var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        axios.get (`${baseurl}/fee/unPaid/${userInfo.userid}`,{
            headers:{
                Authorization:sessionStorage.getItem('Authorization')
            }
        })
        .then(res=>{
            if(res.data.code){
                this.unPaiedLidt = res.data.data
            }
        }).catch(err=>console.log(err))
      }
    },
    mounted(){
      this.getUnpaiedList()
    }    
}
</script>